<template>
  <div class="avatar">
    <div class="avatart_waiyuan">
      <el-avatar :size="100" :src="userinfoStore.profile.avatar" fit="cover" v-if="userinfoStore.profile.avatar"></el-avatar>
      <el-avatar :size="100" :src="circleUrl" fit="cover" v-else></el-avatar>
    </div>
  </div>
  <div class="info">
    <template v-for="(item,index) in info" :key="index">
      <el-row>
        <el-col :span="8">
          <div class="grid-content left ep-bg-purple-dark">{{ item.name }}:</div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content right ep-bg-purple-dark">{{item.value}}</div>
        </el-col>
      </el-row>
    </template>
  </div>
</template>
<script  setup>
import { ref, reactive, onMounted } from 'vue'
import { userinfo } from '@/store/index.js'
const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const userinfoStore = userinfo()
const info = reactive([
  { name: '用户名', value: userinfoStore.profile.username ? userinfoStore.profile.username : '还没有设置，赶紧设置吧！' },
  { name: '昵称', value: userinfoStore.profile.nickname ? userinfoStore.profile.nickname : '还没有设置，赶紧设置吧！' },
  { name: '邮箱', value: userinfoStore.profile.email ? userinfoStore.profile.email : '还没有设置，赶紧设置吧！' },
  { name: '手机号', value: userinfoStore.profile.phone ? userinfoStore.profile.phone : '还没有设置，赶紧设置吧！' },
  { name: '生日', value: userinfoStore.profile.birthday ? userinfoStore.profile.birthday : '还没有设置，赶紧设置吧！' },
  { name: '地址', value: userinfoStore.profile.address ? userinfoStore.profile.address : '还没有设置，赶紧设置吧！' }
])
</script>
<style lang="less" scoped>
.avatar {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  .avatart_waiyuan {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f6fc;
  }
}
.info {
  width: 100%;
  padding: 7px 0;
  background-color: #fafafa;
}
.el-row {
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  .left {
    text-align: center;
    line-height: 36px;
    color: #909399;
    font-weight: 700;
    font-size: 18px;
  }
  .right {
    text-align: center;
    line-height: 36px;
    color: #909399;
    font-size: 14px;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>